<!--
 * @Description: 
 * @Version: 0.1
 * @Autor: Civet
 * @Date: 2019-10-15 16:14:42
 * @LastEditors: Civet
 * @LastEditTime: 2019-10-22 16:11:03
 -->
<template>
  <div class="ct_systemForm">
    <div class="ct_top">
      <el-button type="primary"
                 @click="sysEdit">编辑</el-button>
    </div>
    <!-- 信息展示 -->
    <div class="ct_body">
      <el-scrollbar :native="false"
                    tag="section"
                    class="el-scroll">
        <div class="ct_row">
          <div class="ct_row_left">
            <div class="ct_text_label">系统名称：</div>
            <div class="ct_text_context">
              <el-input v-model="systemForm.system_name"
                        :title="systemForm.system_name"
                        disabled></el-input>
            </div>
          </div>
          <div class="ct_row_right">
            <div class="ct_text_label">父级系统：</div>
            <div class="ct_text_context">
              <el-input v-model="systemForm.fatherSystemName"
                        :title="systemForm.fatherSystemName"
                        disabled></el-input>
            </div>
          </div>
        </div>
        <div class="ct_row">
          <div class="ct_row_left">
            <div class="ct_text_label">建设部门：</div>
            <div class="ct_text_context">
              <el-input v-model="systemForm.buildDepartmentName"
                        :title="systemForm.buildDepartmentName"
                        disabled></el-input>
            </div>
          </div>
          <div class="ct_row_right">
            <div class="ct_text_label">汇交时间：</div>
            <div class="ct_text_context">
              <el-input v-model="systemForm.submit_time"
                        :title="systemForm.submit_time"
                        disabled></el-input>
            </div>
          </div>
        </div>
        <div class="ct_row">
          <div class="ct_row_left">
            <div class="ct_text_label">使用部门：</div>
            <div class="ct_text_context">
              <el-input v-model="systemForm.useOrgName"
                        :title="systemForm.useOrgName"
                        disabled></el-input>
            </div>
          </div>
          <div class="ct_row_right">
            <div class="ct_text_label">汇交方式：</div>
            <div class="ct_text_context">
              <el-input v-model="systemForm.submitWay"
                        :title="systemForm.submitWay"
                        disabled></el-input>
            </div>
          </div>
        </div>
        <div class="ct_row">
          <div class="ct_row_left">
            <div class="ct_text_label">系统承建商：</div>
            <div class="ct_text_context">
              <el-input v-model="systemForm.system_contractor"
                        :title="systemForm.system_contractor"
                        disabled></el-input>
            </div>
          </div>
          <div class="ct_row_right">
            <div class="ct_text_label">系统密级：</div>
            <div class="ct_text_context">
              <el-input v-model="systemForm.systemSecurityLevel"
                        :title="systemForm.systemSecurityLevel"
                        disabled></el-input>
            </div>
          </div>
        </div>
        <div class="ct_row">
          <div class="ct_row_left">
            <div class="ct_text_label">系统版本：</div>
            <div class="ct_text_context">
              <el-input v-model="systemForm.system_version"
                        :title="systemForm.system_version"
                        disabled></el-input>
            </div>
          </div>
          <div class="ct_row_right">
            <div class="ct_text_label">标签：</div>

            <div class="ct_text_context">
              <el-input v-model="systemForm.lableName"
                        :title="systemForm.lableName"
                        disabled></el-input>
            </div>
          </div>
        </div>
        <div class="ct_row">
          <div class="ct_row_left">
            <div class="ct_text_label">系统概述：</div>
            <div class="ct_text_context">
              <el-input v-model="systemForm.system_summary"
                        :title="systemForm.system_summary"
                        disabled></el-input>
            </div>
          </div>
          <div class="ct_row_right">
            <div class="ct_text_label">备注：</div>
            <div class="ct_text_context">
              <el-input v-model="systemForm.remark"
                        :title="systemForm.remark"
                        disabled></el-input>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <!-- 编辑弹窗 -->
    <el-dialog title="基本信息编辑"
               top="6vh"
               width="60%"
               :visible="sysDialog"
               :close-on-click-modal="false"
               @close="sysClose">
      <el-form label-width="100px"
               status-icon
               :model="sysForm"
               ref="sysForm"
               class="demo-ruleForm">
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="系统名称"
                          prop="system_name">
              <el-input v-model="sysForm.system_name"
                        placeholder="系统名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="父级系统"
                          prop="parent_system">
              <el-select v-model="sysForm.parent_system">
                <el-option :label="item.systemName"
                           v-for="item in sysfindAllSysData"
                           :key="item.systemId"
                           :value="item.systemId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="建设部门"
                          prop="build_department">
              <treeselect :multiple="false"
                          :options="findOrgCatalogTreeData"
                          :normalizer="_normalizer"
                          placeholder="建设部门"
                          noOptionsText="暂无数据"
                          noResultsText="没有找到匹配结果"
                          noChildrenText="没有子节点"
                          v-model="sysForm.build_department" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="汇交时间"
                          prop="submit_time">
              <el-date-picker v-model="sysForm.submit_time"
                              type="datetime"
                              placeholder="选择日期"
                              value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="使用部门"
                          prop="use_department">
              <treeselect :multiple="true"
                          :options="findOrgCatalogTreeData"
                          :flat="true"
                          :default-expand-level="1"
                          :normalizer="_normalizer"
                          placeholder="使用部门"
                          noOptionsText="暂无数据"
                          noResultsText="没有找到匹配结果"
                          noChildrenText="没有子节点"
                          v-model="sysForm.use_department" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="汇交方式"
                          prop="submit_way">
              <el-select v-model="sysForm.submit_way">
                <el-option :label="item.dictName"
                           v-for="item in QueryDictInfoByTypeData "
                           :key="item.dictId"
                           :value="item.dictId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="系统承建商"
                          prop="system_contractor">
              <el-input v-model="sysForm.system_contractor"
                        placeholder="系统承建商"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="系统密级"
                          prop="system_security_level">
              <el-select v-model="sysForm.system_security_level">
                <el-option :label="item.dictName"
                           v-for="item in sysexchangeSystemData "
                           :key="item.dictId"
                           :value="item.dictId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="系统版本"
                          prop="system_version">
              <el-input v-model="sysForm.system_version"
                        placeholder="系统版本"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标签"
                          prop="label">
              <treeselect :multiple="true"
                          v-model="sysForm.label"
                          :options="queryLabelTree"
                          :normalizer="_normalizer"
                          :flat="true"
                          :default-expand-level="1"
                          placeholder="标签"
                          noOptionsText="暂无数据"
                          noResultsText="没有找到匹配结果"
                          noChildrenText="没有子节点" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="系统概述"
                          prop="system_summary">
              <el-input v-model="sysForm.system_summary"
                        placeholder="系统概述"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注"
                          prop="remark">
              <el-input type="textarea"
                        placeholder="请输入内容"
                        v-model="sysForm.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="sysCancel">取消</el-button>
        <el-button type="warning"
                   @click="sysKeep">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: { Treeselect },
  name: "SystemForm",
  watch: {},
  props: {
    sysDialog: {
      type: Boolean,
      default: false
    },
    sysForm: {
      type: Object,
      default: () => {
        return {};
      }
    },
    systemForm: {
      type: Object,
      default: () => {
        return {};
      }
    },
    sysfindAllSysData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    findOrgCatalogTreeData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    QueryDictInfoByTypeData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    sysexchangeSystemData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    queryLabelTree: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  filters: {},
  data () {
    return {};
  },
  created () { },
  mounted () { },
  methods: {
    formatLabel (val) {
      let newVal = val || "";
      return newVal.substring(0, newVal.length - 1);
    },
    _normalizer (node) {
      return {
        id: node.id,
        label: node.name,
        children: node.child
      };
    },
    // 编辑系统
    sysEdit () {
      this.$emit("sysEdit");
    },
    // 关闭编辑弹窗接口
    sysClose () {
      this.$emit("sysClose");
    },
    // 取消编辑弹窗接口
    sysCancel () {
      this.$emit("sysCancel");
    },
    // 确定弹窗接口
    sysKeep () {
      this.$emit("sysKeep");
    }
  },
  destroyed () { }
};
</script>

<style scoped lang="less">
.ct_systemForm {
  width: 100%;
  height: 100%;

  .ct_top {
    .flex;
    justify-content: flex-end;
    height: 0.5rem;
  }

  .ct_body {
    height: calc(~"100% - 0.5rem");

    .ct_row {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      font-size: 0.16rem;
      margin: 0.3rem 0;

      .ct_row_left {
        .flex();
        align-items: center;
        width: 50%;
      }

      .ct_row_right {
        .flex();
        align-items: center;
        width: 50%;
      }

      .ct_text_label {
        width: 30%;
        text-align: right;
        font-weight: 700;
      }

      .ct_text_context {
        width: 50%;
        word-wrap: break-word;
      }
    }
  }
}
</style>
